<template>
  <!-- 个体户办理table组件 -->
  <div>
    <transition name="el-zoom-in-top">
      <div
        class="download"
        style="margin-top: 6px"
        v-if="personalType == 2 || personalType == 1 || personalType == 3 || personalType == 0"
        v-show="checkboxSelect > 0"
      >
        <i class="el-icon-info"></i>
        共{{ total }}项，已选择<b>{{ checkboxSelect }}</b
        >项
        <span @click="excelDownload">下载信息</span>
        <span style="margin-left: 0" @click="excelDownloads">下载附件</span>
        <em @click="cleanSelection">清空</em>
      </div>
    </transition>
    
    <el-table
      ref="multipleTable"
      @selectionChange="downloadWhether"
      :data="tableData"
      stripe
      style="width: 100%"
      :row-key="getRowKeys"
      @sort-change="sortChange"
    >
      <el-table-column type="selection" :reserve-selection="true" width="45" v-if="personalType == 2 || personalType == 1 || personalType == 3 || personalType == 0">
      </el-table-column>
      <el-table-column width="45" v-else> </el-table-column>
      <el-table-column prop="legalName" ids="sb.legalName" sortable="custom" label="姓名"> </el-table-column>
      <el-table-column prop="legalIdcard" sortable="custom" min-width="150" label="身份证号"> </el-table-column>
      <el-table-column prop="legalPhone" sortable="custom" min-width="100" label="联系电话"> </el-table-column>
      <el-table-column prop="businessNames" label="关注公司" min-width="250">
        <template #default="item">
          <template v-if="item.row.businessNames == null || item.row.businessNames == ''">--</template>
          <template v-else>{{item.row.businessNames}}</template>
        </template>
      </el-table-column>
      <el-table-column prop="platformName" label="灵工平台"> </el-table-column>
      <el-table-column sortable="custom" min-width="100" prop="createTime" align="center" label="注册时间">
        <template #default="item">
        {{ format('yyyy-MM-dd', new Date(item.row.createTime)) }}
        </template>
      </el-table-column>
      <el-table-column prop="processStatus" label="审核状态">
        <template #default="item">
          {{ processStatus[item.row.processStatus] }}
        </template>
      </el-table-column>

      <el-table-column prop="comment" label="备注">
        <template #default="item">
          {{ item.row.comment == null ? "无" : item.row.comment }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" align="center" label="授权委托书" width="120" v-if="personalType == 4">
        <template #default="item">
          <span v-if="item.row.authAgreementUrl == null">-</span>
          <el-button v-else class="open-crm" type="text" @click="openUrl(item.row.authAgreementUrl)">查看</el-button>
          <span v-if="item.row.redoStatus&2">(需更新)</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" align="center" label="平台协议书" width="120" v-if="personalType == 4">
        <template #default="item">
          <span v-if="item.row.platformAgreementUrl == null">-</span>
          <el-button v-else class="open-crm" type="text" @click="openUrl(item.row.platformAgreementUrl)">查看</el-button>
          <span v-if="item.row.redoStatus&1">(需更新)</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" align="center" label="意愿视频" width="120" v-if="personalType == 4">
        <template #default="item">
          <span v-if="item.row.wishVideoUrl == null">-</span>
          <el-button v-else class="open-crm" type="text" @click="openVideos(item.row.wishVideoUrl)">查看</el-button>
          <span v-if="item.row.redoStatus&4">(需更新)</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="personalType != 4"
        prop="caozuo"
        align="left"
        label="操作"
        min-width="160"
        class-name="editor"
      >
        <template #default="item">
          <!-- <el-button v-if="personalType == 0" @click="toQueryMethods" type="text">详情</el-button> -->
          <el-button
            v-if="item.row.processStatus == 1"
            @click="toExamineMethods(item.row.sevicerId,item.row.id)"
            type="text"
            >审核</el-button
          >
          <el-button
            v-if="item.row.processStatus == 2"
            @click="toZizhiMethods(item.$index)"
            type="text"
            >资质上传</el-button
          >
          <el-button
            v-if="item.row.processStatus == 2"
            @click="cancelStatus(item.row.sevicerId, item.row.id)"
            type="text"
            >取消办理</el-button
          >
          <el-button
            v-if="item.row.processStatus == 3 || item.row.processStatus == 5"
            @click="toQueryMethods(item.$index)"
            type="text"
            >查看</el-button
          >
          <el-button
            v-if="item.row.processStatus == 3"
            @click="deleteStatus(item.row.sevicerId, item.row.id)"
            type="text"
            >注销</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        v-if="personalType == 4"
        prop="caozuo"
        align="left"
        label="操作"
        width="310"
        class-name="editor"
      >
        <template #default="item">
          <el-button
            v-if="item.row.processStatus == 4"
            @click="toExamineMethods(item.row.sevicerId,item.row.id)"
            type="text"
            >审核</el-button
          >
          <template v-if="personalType == 4">
            <el-button type="text" @click="againAgreementAlert(item.row)">重新签署协议</el-button>
            <el-button type="text" v-if="item.row.redoStatus&4" @click="againAgreement(item.row.sevicerId, -4)">取消重新录制意愿视频</el-button>
            <el-button type="text" v-else @click="againAgreement(item.row.sevicerId, 4)">重新录制意愿视频</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="tableData.length > 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="arrPage"
      :page-size="selectPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="详细信息"
      custom-class="examine-style"
      v-model="toExamine"
      width="60%"
    >
      <div v-if="tableData.length > 0">
        <el-row :gutter="24" style="margin-bottom: 20px">
          <el-col :span="24">
            <div class="pad-loader" v-if="Object.keys(infoObject).length == 0">
              <content-loader :width="710" :height="300" :speed="3" primaryColor="#f3f3f3" secondaryColor="#ecebeb">
                <rect x="98" y="20" rx="6" ry="6" width="300" height="10" />
                <rect x="98" y="50" rx="6" ry="6" width="352" height="10" />
                <rect x="0" y="100" rx="6" ry="6" width="710" height="10" />
                <rect x="0" y="130" rx="6" ry="6" width="680" height="10" />
                <rect x="0" y="160" rx="6" ry="6" width="478" height="10" />
                <circle cx="40" cy="40" r="40" />
              </content-loader>
            </div>
            <div class="infoCon" v-else>
              <b style="width: 100%"
                ><em>姓名：</em>{{ infoObject.name }}</b
              >
              <b style="width: 100%"
                ><em>身份证号：</em>{{ infoObject.idcard }}</b
              >
              <b style="width: 100%"
                ><em>联系电话：</em>{{ infoObject.phone }}</b
              >
              <!-- <b style="width: 100%"
                ><em>统一社会信用代码：</em
                >{{ tableData[personalId].socialCreditCode }}</b
              > -->
              <b style="width: 100%"
                ><em>家庭住址：</em>{{ infoObject.address }}</b
              >
              <b style="width: 100%"><em>身份证正反面照片：</em>
								<div class="image-box">
									<el-image :preview-src-list="[infoObject.idcardFrondUrl, infoObject.idcardBackUrl]" :src="infoObject.idcardFrondUrl"></el-image>
								</div>
								<div class="image-box">
									<el-image :preview-src-list="[infoObject.idcardFrondUrl, infoObject.idcardBackUrl]" :src="infoObject.idcardBackUrl"></el-image>
								</div>
							</b>
							<b style="width: 100%"><em>意愿协议视频：</em>
                <div class="image-box" @click="openVideo">
									<!-- <el-image :src="require('../../assets/img/video.png')"></el-image> -->
                  <div style="position: relative; width:100%;height:100%;">
                    <video style="width:100%;height:100%;">
                      <source
                        :src="infoObject.wishVideoUrl"
                        type="video/mp4"
                      />
										</video>
                    <div style="position: absolute; left: 0; left: 0;width:100%;height:100%;background-color: #FFF;top: 0;opacity: 0;"></div>
                  </div>
								</div>
							</b>
              <b style="width: 100%">
								<em>委托协议书：</em>
								<a style="color:rgb(50, 108, 240); cursor:pointer" @click="openUrl(infoObject.authAgreementUrl)">委托协议书</a>
							</b>
              <b style="width: 100%">
								<em>平台协议书：</em>
								<a style="color:rgb(50, 108, 240); cursor:pointer" @click="openUrl(infoObject.platformAgreementUrl)">平台协议书</a>
							</b>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-form
          class="examine-from"
          ref="examineFrom"
          :model="examineFrom"
          label-width="30%"
        >
          <el-form-item label="审核结果">
            <el-radio-group v-model="examineFrom.processStatus">
              <el-radio v-show="personalType == 4" label="1">正常</el-radio>
              <el-radio label="2">办理中</el-radio>
              <el-radio label="4">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="驳回原因" v-if="examineFrom.processStatus == 4">
            <el-select v-model="examineFrom.rejectCode" placeholder="请选择">
              <el-option
                  v-for="item in $store.state.reasonsRejectionArr"
                  :key="item.dataCode"
                  :label="item.dataMsg"
                  :value="item.dataCode"
                >
                </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="备注">
            <el-input type="textarea" v-model="examineFrom.comment"></el-input>
          </el-form-item> -->
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="toExamine = false">取 消</el-button>
          <el-button size="small" type="primary" @click="personalShenhe"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog title="意见协议视频" v-model="playerVideo" @close="closeVideo" width="780px" height="400px">
			<div class="videoPlayer-style" v-if="Object.keys(infoObject).length > 0">
				<video ref="videoPlayer" class="vjs-default-skin" :src="infoObject.wishVideoUrl" controls="controls">
				</video>
			</div>
		</el-dialog>
    <el-dialog
      title="个人资质信息"
      custom-class="personal-style"
      v-model="personalTions"
      width="70%"
    >
      <div class="personal-form">
        <el-form
          class="examine-from-style"
          ref="personalTionsForm"
          :model="personalTionsForm"
          :rules="rules"
          label-width="30%"
        >
          <div class="flex margin-bottom">
            <div class="flex-sub flex personalTions-item">
              <span>经营者姓名:</span>
              <div class="personal-text">{{ personalTionsForm.legalName }}</div>
            </div>
            <div class="flex-sub flex personalTions-item">
              <span>企业名称:</span>
              <el-form-item prop="name">
                <el-input type="textarea" v-model="personalTionsForm.name"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="flex margin-bottom">
            <div class="flex-sub flex personalTions-item">
              <span>组织形式:</span>
              <div class="personal-text">个人经营</div>
            </div>
            <div class="flex-sub flex personalTions-item">
              <span>类型:</span>
              <div class="personal-text">个体工商户</div>
            </div>
          </div>
          <div class="flex margin-bottom">
            <div class="flex-sub flex personalTions-item">
              <span>注册日期:</span>
              <el-form-item prop="openTime">
                <el-date-picker
                  v-model="personalTionsForm.openTime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div class="flex-sub flex personalTions-item">
              <span>经营场所:</span>
              <div class="personal-text">{{ personalTionsForm.address }}</div>
            </div>
          </div>
          <div class="flex margin-bottom">
            <div class="flex-sub flex personalTions-item">
              <span>注册资金:</span>
              <div class="personal-text">{{ personalTionsForm.registerCapital == null ? '-' : personalTionsForm.registerCapital }}万</div>
            </div>
            <div class="flex-sub flex personalTions-item">
              <span>统一社会信用代码:</span>
              <!-- <div class="personal-text">{{ personalTionsForm.socialCreditCode }}</div> -->
              <div class="personal-text personal-socialCreditCode">
                <el-input type="text" v-model="personalTionsForm.socialCreditCode"></el-input>
              </div>
            </div>
          </div>
          <div class="flex margin-bottom">
            <div class="flex-sub flex personalTions-item">
              <span>登记机关:</span>
              <div class="personal-text">{{ personalTionsForm.registerUnit }}</div>
            </div>
            <div class="flex-sub"></div>
          </div>
          <div class="flex margin-bottom">
            <div class="flex-sub flex personalTions-item">
              <span style="width:12.5%">经营范围:</span>
              <div style="width: calc(12.5% + 590px)" class="personal-text">{{ personalTionsForm.businessScope }}</div>
            </div>
          </div>
          <div class="flex margin-bottom">
            <div class="flex-sub flex personalTions-item">
              <span style="width: 12.5%">营业执照照片:</span>
              <div>
                <el-upload
                  action="#"
                  :on-change="handleChangeFile"
                  list-type="picture-card"
                  :auto-upload="false"
                  :multiple="false"
                  :limit="1"
                  ref="uploadImage"
                >
                  <template #default>
                    <i class="el-icon-plus"></i>
                  </template>
                  <template #file="{ file }">
                    <div>
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      />
                      <span class="el-upload-list__item-actions">
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="flex margin-bottom">
            <div class="flex-sub flex personalTions-item">
              <span style="width: 12.5%">补充文件上传:</span>
              <div>
                <el-upload
                  action="#"
                  accept="image/png,image/jpeg,application/pdf,docx"
                  list-type="picture-card"
                  :multiple="false"
                  :limit="1"
                  lass="upload-demo"
                  :file-list="fileList"
                  :http-request="(file) => handleChange(file)"
                >
                  <template #default>
                    <i class="el-icon-plus"></i>
                  </template>
                  <template #file="{ file }">
                    <div>
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      />
                      <span class="el-upload-list__item-actions">
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemoves(file)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="personalTions = false"
            >取 消</el-button
          >
          <el-button size="small" type="primary" @click="personalTionsMethods"
            >保存并通过</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="签署协议"
      v-model="againAgreementVisible"
      width="420px">
        <div class="againAgreement-box">
          <button class="againAgreement-button" @click="againAgreement(serviceId, agreementStatus)" type="button">{{agreementText}}</button>
          <button class="againAgreement-button" @click="againAgreement(serviceId, platformStatus)" type="button">{{platformText}}</button>
        </div>
    </el-dialog>
    <el-dialog
      title="个体户信息"
      custom-class="examine-style"
      v-model="personInfo"
      width="60%"
    >
      <div>
        <el-row :gutter="24" style="margin-bottom: 20px">
          <el-col :span="24">
            <div class="infoCon">
              <b
                ><em>经营者姓名：</em
                >{{ tableData[personalId].legalName }}</b
              >
              <b
                ><em>企业名称：</em
                >{{ tableData[personalId].selfBusinessName }}</b
              >
              <b
                ><em>组织形式：</em
                >{{ organizationalForms[tableData[personalId].organizationalForm]}}</b
              >
              <b
                ><em>企业类型：</em
                >{{ selfBusinessType[tableData[personalId].selfBusinessType] }}</b
              >
              <b
                ><em>注册日期：</em
                >{{format( "yyyy-MM-dd",new Date(tableData[personalId].openTime) )}}</b
              >
              <b><em>登记机关：</em>{{ tableData[personalId].registerUnit }}</b>
              <b
                ><em>注册资金：</em
                >{{ tableData[personalId].registerCapital + '万'}}</b
              >
              <b><em>统一社会信用代码：</em>{{ tableData[personalId].socialCreditCode }}</b>
              
              <b style="width:100%"><em>经营场所：</em>{{ tableData[personalId].address }}</b>
              <b style="width: 100%">
                <em>经营范围：</em>
                <i>{{ tableData[personalId].businessScope }}</i>
              </b>
              <b style="width: 100%"
                ><em>营业执照照片：</em>
                <div class="image-box">
                  <el-image
                    :preview-src-list="[tableData[personalId].licenseUrl]"
                    :src="tableData[personalId].licenseUrl"
                  ></el-image>
                </div>
              </b>
              <b style="width: 100%"
                ><em>补充文件：</em>
								<div v-if="tableData[personalId].enFileUrl" class="image-box">
									<el-image :preview-src-list="[tableData[personalId].enFileUrl]" :src="tableData[personalId].enFileUrl"></el-image>
								</div>
								<span style="padding-top:0; text-align:left" v-else>--</span>
              </b>
            </div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="personInfo = false">取 消</el-button>
          <el-button size="small" type="primary" @click="personInfo = false"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
// import { ElLoading } from "axios";
import {
  ContentLoader
} from 'vue-content-loader'
export default {
  props: ["personalType", "search"],
  components: {
    ContentLoader
  },
  data() {
    return {
      serviceId: 0,
      agreementText: "重新签署授权书",
      agreementStatus: 2,
      platformText: "重新签署平台协议书",
      againAgreementVisible: false,
      platformStatus: 1,
      getRowKeys(row) {
        // 获取row的key值
        return row.id;
      },
      fileList: [],
      enFileUrls: '',
      licenseUrls: '',
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      selectDate: "",
      rejectionReasons: [
        // 驳回原因
        {
          value: 1,
          label: "意愿视频无效",
        }
      ],
      playerVideo: false,
      currentPage: 1, // 当前页
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      dwonloadList: [], // 选中的数据
      tableData: [],
      toExamine: false,
      examineFrom: {
        processStatus: "",
        comment: "",
        rejectCode: 4,
        operateType: 2,
        id: ""
      },
      personalTions: false,
      personalTionsForm: {
        id: "",
        sevicerId: "", // 服务者id
        name: "", // 企业名称
        socialCreditCode: "", // 统一社会信用代码
        legalName: "", // 经营者姓名
        registerUnit: "", // 登记机关
        address: "", // 经营场所
        businessScope: "", // 经营范围
        openTime: "", // 注册日期
        operateType: "1", // 1: API接入 2：OEM
        selfBusinessType: '1', // 类型
        organizationalForm: '1', // 组织形式
        registerCapital: "", // 注册资金
      },
      activeSelect: 1,
      yingyeEndtime: "", // 营业截止日期
      // 个体资质信息
      composition: [
        // 组成形式
        {
          value: 1,
          label: "个体经营",
        },
        {
          value: 2,
          label: "家庭经营",
        },
        {
          value: 3,
          label: "个人合伙经营",
        },
      ],
      organizationalForms: {
        "1": "个体经营",
      },
      selfBusinessType: {
        "0": "其他",
        "1": "个体工商户",
        "2": "有限责任公司",
        "3": "股份有限公司",
        "4": "合伙企业",
        "5": "个人独资企业"
      },
      operationStatusVal: 1,
      operationStatus: [
        // 经营状态
        {
          value: 1,
          label: "在营",
        },
        {
          value: 2,
          label: "注销",
        },
      ],
      industyMsgVal: 1,
      industyMsg: [
        // 所属行业
        {
          value: 1,
          label: "餐饮",
        },
        {
          value: 2,
          label: "运输",
        },
        {
          value: 3,
          label: "美容",
        },
        {
          value: 4,
          label: "跑腿",
        },
      ],
      processStatus: {
        1: "未办理",
        2: "办理中",
        3: "已办理",
        4: "被驳回",
        5: "已注销",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      personInfo: false,
      checkboxSelect: 0,
      personalId: 0,
      fileData: null,
      fileUrl: '',
      rules: {
        name: [
          { required: true, message: "请输入企业名称", trigger: "change" },
        ],
        socialCreditCode: [
          { required: true, message: "请输入社会信用代码", trigger: "change" },
        ],
        openTime: [
          { required: true, message: "请选择成立时间", trigger: "change" },
        ],
        registerUnit: [
          { required: true, message: "请输入登记机关", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择营业期限", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入企业地址", trigger: "change" },
        ],
        businessScope: [
          { required: true, message: "请输入经营范围", trigger: "change" },
        ],
      },
      infoObject: {},
      numToCap: {
        '1': '壹',
        '2': '贰',
        '3': '叁',
        '4': '肆',
        '5': '伍',
        '6': '陆',
        '7': '柒',
        '8': '捌',
        '9': '玖',
        '0': '零',
        'X': '拾',
      }
    };
  },
  // activated(val){
  //   this.$emit('getTotal', val)
  // },
  watch: {
    total(val) {
      if(this.personalType == 0) {
        this.$emit('getTotal', val)
      }
    }
  },
  mounted() {
    // 获取个体户信息数据
    this.getPersonalData();
  },
  methods: {
    deleteStatus(serviceId, id) {
      // 注销个体工商户
      this.$confirm('<div style="padding: 10px 0;">是否确认注销此个体工商户?</div>', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'task-message',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.personalHttp({
          processStatus: 5,
          comment: "",
          rejectCode: 4,
          operateType: 2,
          id: id,
          sevicerId: serviceId
        });
      }).catch(() => {
      })
    },
    cancelStatus(serviceId, id) {
      // 取消办理个体工商户
      this.$confirm('<div style="padding: 10px 0;">是否确认取消办理个体工商户?</div>', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'task-message',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.personalHttp({
          processStatus: 1,
          comment: "",
          rejectCode: 4,
          operateType: 2,
          id: id,
          sevicerId: serviceId
        });
      }).catch(() => {
      })
    },
    againAgreementAlert(d) {
      // 重新签署协议
      this.againAgreementVisible = true
      if(d.redoStatus&2) {
        this.agreementText = '取消重新签署授权书'
        this.agreementStatus = -2
      }
      if(d.redoStatus&1) {
        this.platformText = '取消重新签署平台协议书'
        this.platformStatus = -1
      }
      this.serviceId = d.sevicerId
    },
    againAgreement(id, status) {
      // 更改意愿视频 协议状态 是否需要更新
      this.$http({
        url: "/api/sevicer/updateRedoStatus",
        method: "post",
        params: {
          id: id,
          redoStatus: status
        },
      }).then((data) => {
        if(data.code == 0) {
          this.$message.success("操作成功")
          this.againAgreementVisible = false
          this.getPersonalData()
        }
      });
    },
    openVideos(url) {
      // 查看视频
      this.$alert('<video width="400" controls height="300" src="' + url +'"></video>', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        center: true,
        customClass: "seeVideo"
      })
    },
    openVideo() {
      this.playerVideo = true
      // if(this.player != null) return false
      // let options = {
      //   controls: true, // 是否显示底部控制栏
      //   preload: "auto", // 加载<video>标签后是否加载视频
      //   autoplay: "muted", // 静音播放
      //   // playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
      //   width: "740",
      //   height: "360",
      //   fluid: true,
      //   controlBar: {
      //     // 自定义按钮的位置
      //     children: [{
      //         name: "playToggle"
      //       },
      //       {
      //         name: "progressControl"
      //       },
      //       {
      //         name: "currentTimeDisplay"
      //       },
      //       {
      //         name: "timeDivider"
      //       },
      //       {
      //         name: "durationDisplay"
      //       },
      
      //       {
      //         name: "volumePanel", // 音量调整方式横线条变为竖线条
      //         inline: false
      //       },
      //       {
      //         name: "pictureInPictureToggle" //画中画播放模式
      //       },
      //       {
      //         name: "fullscreenToggle"
      //       }
      //     ]
      //   }
      // };
      // setTimeout(() => {
      //   this.player = this.$video(this.$refs.videoPlayer, options, function onPlayerReady() {
      //     console.log('onPlayerReady', this);
      //   })
      // }, 500)
    },
    closeVideo() {
      // 关闭视频
      this.$refs.videoPlayer.pause()
      this.playerVideo = false
    },
    getPersonalData() {
      // 获取个体户办理状态
      // console.log(this.personalType)
      // 获取个体户列表
      this.$http({
        url: "/api/selfbusiness/selectSelfBusinessByStatus",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          mixedStr: this.search,
          processStatus: this.personalType,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    sortChange(d) {
        // 监听排序
        if(d.prop == null) {
            // 默认排序方式
            this.orderByZH = false
            this.orderByAsc = false
            this.orderByColume = 'createTime'
        }else {
            let orderByZH = false
            if(d.prop == "legalName" || d.prop == "linkManName" || d.prop == "name" || d.prop == "businessNames" || d.prop == "platformName") {
            orderByZH = true
            }
            this.currentPage = 1
            this.selectPage = 10
            let orderByAsc = d.order == "descending" ? false : true
            this.orderByZH = orderByZH
            this.orderByAsc = orderByAsc
            this.orderByColume = d.ids
        }
        this.getPersonalData();
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getPersonalData();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getPersonalData();
    },
    open(imgSrc) {
      this.$alert('<img src="' + imgSrc + '" />', {
        dangerouslyUseHTMLString: true,
        center: true,
      });
    },
    toExamineMethods(sevicerId,id) {
      // 个体户审核详情信息
      this.getInfoDel(sevicerId)
      this.toExamine = true;
      this.examineFrom.id = id;
    },
    getInfoDel(id) {
      // 获取详情信息
      this.infoObject = {}
      this.$http({
        url: '/api/sevicer/selectSevicerById?sevicerId=' + id,
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(data => {
        if (data.code === 0) {
          this.infoObject = data.result
        }
      })
    },
    toZizhiMethods(i) {
      // 资质上传
      this.personalTions = true;
      let d = this.tableData[i]
      let n = d.legalIdcard.substring(d.legalIdcard.length - 4, d.legalIdcard.length)
      let s = ''
      n.split('').forEach(i => {
        s += this.numToCap[i]
      })
      let name = '抚州市临川区' + d.platformName.substring(0, 2) + d.legalName.substring(d.legalName.length - 1, d.legalName.length) + s + '商务服务工作室'
      this.personalTionsForm = {
        id: d.id,
        sevicerId: d.sevicerId, // 服务者id
        name: name, // 企业名称
        socialCreditCode: "", // 统一社会信用代码
        legalName: d.legalName, // 经营者姓名
        registerUnit: "抚州市临川区市场监督管理局", // 登记机关
        address: d.address, // 经营场所
        businessScope: "外卖递送服务，市场营销策划，会议及展览服务，专业保洁、清洗、消毒服务，家政服务，日用家电零售，装卸搬运，社会调查（不含涉外调查），软件开发（除许可业务外，可自主依法经营法律法规非禁止或限制的项目）", // 经营范围
        openTime: "", // 注册日期
        operateType: "1", // 1: API接入 2：OEM
        selfBusinessType: '1', // 类型
        organizationalForm: '1', // 组织形式
        registerCapital: 0.01, // 注册资金
      }
    },
    toQueryMethods(i) {
      // 查看
      
      let licenseUrl = this.tableData[i].enFileUrl
      this.enFileUrls = this.tableData[i].enFileUrl
      if(licenseUrl != null){
        this.licenseUrls = licenseUrl.substring(0, licenseUrl.indexOf('?')).substring(licenseUrl.lastIndexOf('.') + 1, licenseUrl.length); 
      }
      this.personalId = i;
      this.personInfo = true;
    },
    handleRemove() {
      this.$refs.uploadImage.clearFiles();
      this.fileData = null
    },
    handleRemoves() {
      this.$refs.uploadImage.clearFiles();
      this.fileList = []
      this.fileData = null
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    cleanSelection() {
      // 清空选择
      this.$refs.multipleTable.clearSelection();
    },
    downloadWhether(d) {
      this.checkboxSelect = d.length;
			this.dwonloadList = d;
    },
    personalShenhe() {
      // 审核
      // this.toExamine = false
      if (this.examineFrom.processStatus == "") {
        // this.toExamine = false;
        this.$message.error("请选择审核结果")
        return false;
      }
      if(this.examineFrom.processStatus == 4 && this.examineFrom.rejectCode == '') {
        this.$message.error("请选择驳回原因")
        return false;
      }
      this.examineFrom["sevicerId"] = this.infoObject.id;
      this.personalHttp(this.examineFrom);
    },
    handleChangeFile(file) {
      this.fileData = file;
    },
    handleChange(param) {
      
      // 上传凭证文件
      let formList = new FormData();
      formList.append("file", param.file);
      axios({
        method: "POST",
        url: "/api/oss/uploadBySingle",
        headers: {
          "content-type": "multipart/form-data",
        },
        data: formList,
      })
        .then((data) => {
          if (data.data.code == 0) {
            this.fileUrl = data.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    personalTionsMethods() {
      // 资质审核
      this.$refs.personalTionsForm.validate((valid) => {
        if (valid) {
          // 上传
          if(this.fileData == null) {
            this.$message.error("请选择营业执照")
            return false
          }
          const form = new FormData();
          Object.keys(this.personalTionsForm).forEach((key) => {
            form.append(key, this.personalTionsForm[key]);
          });
          form.delete("openTime")
          form.append("openTime", this.format('yyyy-MM-dd hh:mm:ss', this.personalTionsForm.openTime));
          // 文件对象
          // this.personalHttp(this.personalTionsForm);
          form.append("img", this.fileData.raw);
          form.append("enFileUrl", this.fileUrl);
          let loadingAlert = this.$loading({
              lock: true,
              text: '加载中...',
              customClass: 'custom-loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.1)'
          })
          axios({
            method: "POST",
            url: "/api/oss/oneOfFile",
            headers: {
              "content-type": "multipart/form-data",
              "Authorization": localStorage.getItem("hegui_token")
            },
            data: form,
          })
            .then(res => {
              loadingAlert.close()
              if(res.data.code == 0) {
                this.$message.success("上传成功")
                this.personalTions = false;
                //this.getPersonalData();
                this.$emit('changeTab', '2')
              }else {
                this.$message.error(res.data.msg)
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    personalHttp(d) {
      // 统一调用修改方法
      this.$http({
        url: "/api/selfbusiness/updateSelfBusiness",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: d,
      }).then((data) => {
        if (data.code === 0) {
          this.toExamine = false;
          this.personalTions = false;
          this.getPersonalData();
          // this.$emit('changeTab', d.processStatus)
        }
      });
    },
    excelDownload() {
      // 下载
      let checkSelect = new FormData();
      for (let i = 0; i < this.dwonloadList.length; i++) {
        checkSelect.append("list", this.dwonloadList[i].id);
      }
      checkSelect.append("processStatus", this.personalType)
      axios({
        method: "POST",
        url: "/api/selfbusiness/doSelfBusinessExcel",
        data: checkSelect,
        responseType: "blob",
        headers: {
          "Content-Type": "application/json",
          "Authorization": localStorage.getItem("hegui_token")
        }
      })
        .then((res) => {
          const blob = new Blob([res.data]);
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          //后台再header中传文件名
          downloadElement.href = href;
          if(this.personalType == 1) {
            downloadElement.download = "个体户未办理信息"+ this.format("yyyyMMddhhmmss", new Date()) +".xlsx";
          }else {
            downloadElement.download = "个体户办理中信息"+ this.format("yyyyMMddhhmmss", new Date()) +".xlsx";
          }
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((err) => {
          console.log(err);
        });
    },
    excelDownloads() {
      let loginUserName = localStorage.getItem("hegui_username");
      // 下载附件
      let checkSelect = new FormData();
      // let getTime = new Date().getTime()
      for (let i = 0; i < this.dwonloadList.length; i++) {
        checkSelect.append("selfIdList", this.dwonloadList[i].id);
      }
      checkSelect.append("fileRes", "10002");
      checkSelect.append("loginUserName", loginUserName);
      checkSelect.append("fileName", "个体户办理信息附件" + this.format("yyyyMMddhhmmss", new Date()));
      checkSelect.append("excelFileName", "个体户办理信息附件"+ this.format("yyyyMMddhhmmss", new Date()));
      axios({
        method: "POST",
        url: "/api/download/downloadSevicerAnnex",
        data: checkSelect,
        headers: {
					'Content-Type': 'application/json',
          Authorization: localStorage.getItem("hegui_token")
				}
      }).then(() => {
          this.$message.success("已添加至下载列表，请到下载列表中查看下载");
      }).catch((err) => {
        console.log(err)
          this.$message.error(err);
      });
    },
		openUrl(url) {
			// 打开新窗口查看协议
			// let newwin = window.open()
			// newwin.document.write("<img src="+ url +" />")
      this.$http({
        url: "/public/common/oss/pdfPreView",
        method: "post",
        params: {
          ossPath: url
        },
        responseType: 'blob'
      }).then((data) => {
        const blob = new Blob([data]);
        const href = window.URL.createObjectURL(blob)
        window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
      });
		}
  },
};
</script>
<style>
.open-crm {
  font-size: 12px;
}
.examine-style .el-dialog__header,
.personal-style .el-dialog__header {
  border-bottom: 1px solid #f7fbfe;
  padding-left: 0;
  padding-right: 0;
  margin: 0 20px;
}

.examine-style .el-dialog__footer,
.personal-style .el-dialog__footer {
  text-align: center;
}

.el-date-editor--date .el-input__inner {
  padding-left: 30px;
}

.examine-style .el-form-item__label {
  color: #6c8198;
  font-size: 12px;
}

.examine-style .el-textarea {
  width: 80%;
}

.examine-from-style .el-textarea {
  width: 100% !important;
}

.personal-form .el-date-editor.el-input {
  width: 60%;
}

.personal-socialCreditCode .el-input {
  width: 100% !important;
}
.personal-form .el-date-editor--daterange.el-input__inner {
  width: 60%;
}
.examine-from-style .el-upload--picture-card,
.examine-from-style .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
  margin-bottom: 0;
  line-height: 100px;
}
</style>
<style scoped lang="scss">
.againAgreement-box {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  .againAgreement-button {
    padding: 8px 16px;
    background-color: #326CF0;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
  }
}
.personal-form {
  .flex {
    display: flex;
  }

  .flex-sub {
    flex: 1;
  }

  .personalTions-item {
    align-items: center;

    & > span {
      font-size: 12px;
      color: #6c8198;
      width: 25%;
      text-align: right;
      margin-right: 10px;
    }

    .el-input {
      top: 0px;
      width: 60%;
    }

    .el-select {
      width: 60%;
    }

    .el-textarea {
      width: 80%;
    }
  }

  .margin-bottom {
    margin-bottom: 20px;
  }
}
.examine-from-style {
	.el-form-item {
		margin-bottom: 0;
		width: 60%;
		.el-form-item__content {
			margin-left: 0 !important;
			.el-input {
				width: 100%;
			}
		}
	}
}
.image-box {
	display: inline-block !important;
}
.infoCon {
  margin-top: 0;
}
.task-message {
  width: 270px;
  text-align: left;
  .el-button--primary {
    background-color: #326CF0;
    color: #ffffff;
  }
}
</style>
<style>
.videoPlayer-style {
  width: 740px;
  height: 360px;
  text-align: center;
}
.vjs-default-skin {
  width: 740px !important;
  height: 360px !important;
  padding-top: 0 !important;
}
.video-js .vjs-big-play-button {
  top: 50%;
  margin-top: -0.75rem;
  left: 50%;
  margin-left: -1.5rem;
}
.personal-text {
  width: 290px;
  color: #0A2E6A;
}
</style>
